<template>
	<div class="type">
		<!-- 头部 -->
		<el-row justify="space-between">
			<el-col :span="4">
				<span>类型</span>
			</el-col>
			<el-col :span="3">
				<span><el-button type="primary" @click="add()"><el-icon><circle-plus /></el-icon>添加一层类型</el-button></span>
			</el-col>
		</el-row>
		<div class="border-bottom"></div>
		<!-- 弹窗 -->
		<el-dialog v-model="showAlter" center  width="550px" title="类型信息">
			
				<el-form ref="from">
					<el-row class="from-item">
						<label>PID：</label>
						<el-input style="width: 80%;" size="mini" readonly
						v-model.lazy.trim="form.pid"></el-input>
					</el-row>
					<el-row class="from-item">
						<label>父类型：</label>
						<el-input style="width: 80%;" size="mini" readonly
						v-model.lazy.trim="form.plabel"></el-input>
					</el-row>
					  <el-divider></el-divider>
					<el-row class="from-item">
						<label>本ID：</label>
						<el-input style="width: 80%;" size="mini" readonly
						v-model.lazy.trim="form.id"></el-input>
					</el-row>
					<el-row class="from-item">
						<label>本类型：</label>
						<el-input style="width: 80%;" size="mini"
						v-model.lazy.trim="form.type" placeholder="请输入添加类型名称"></el-input>
					</el-row>
					<el-row class="from-item">
						<label>优先级：</label>
						<el-input style="width: 80%;" size="mini"
						v-model.lazy.trim="form.prio"></el-input>
					</el-row>
				</el-form>
				<span class="dialog-footer">
					<el-button @click="showAlter=false">取消</el-button>
					<el-button type="primary" @click="addType()">添加</el-button>
				</span>
		</el-dialog>
		
		<!-- 底部表格 -->
		<el-table
		  :data="chilrType"
		  style="width: 100%"
		  row-key="id"
		  border
		  lazy
		>
		  <el-table-column label="书本类型" prop="name"/>
		  <el-table-column label="类型ID" prop="id"/>
		  <el-table-column label="优先级ID" prop="prio"/>
		  <el-table-column label="添加子节点" width="100" align="center">
		  	<template #default="scope">
		  		<el-button size="small" type="primary"
				@click="addChildType(scope.row)"
				v-if="scope.row.children || scope.row.pid==0">
				<el-icon><plus /></el-icon>
				</el-button>
		  	</template>
		  </el-table-column>
		  <el-table-column label="修改" width="100" align="center">
		  	<template #default="scope">
		  		<el-button size="small" type="warning"
				@click="updateType(scope.row)">
				<el-icon><edit /></el-icon>
				</el-button>
		  	</template>
		  </el-table-column>
		</el-table>
	</div>
</template>

<script>
	import qs from 'qs';
	import { ElMessage } from 'element-plus';
	import {Plus,Edit,CirclePlus} from '@element-plus/icons-vue';
	export default{
		name:'Type93',
		data(){
			return{
				type93:[],
				chilrType:[],
				showAlter:false,
				form:{
					id:0,
					type:'',
					pid:0,
					prio:100,
					plabel:'新一层节点'
				}
			}
		},
		components:{Plus,Edit,CirclePlus},
		created() {
			this.select()
		},
		methods:{
			// 请求数据
			select(){
				this.axios.get('/api/adm/type/findAll2').then((res)=>{
					this.type93 = res.data.data
					this.getMeun(0,this.chilrType)
				}).catch((error)=>{
					console.log(error);
				})
			},
			//显示弹窗
			add(){
				this.showAlter = true
			},
			//添加子节点
			addChildType(obj){
				this.add();
				this.form = {
					id:0,
					type:'',
					pid:obj.id,
					prio:110,
					plabel:obj.name
				}
			},
			// 添加一层类型
			addType(){
				this.showAlter = false;
				this.chilrType = [];
				this.axios.post('/api/adm/type/add',qs.stringify(this.form)).then((res)=>{
					this.type93 = res.data.data;
					this.select()
					ElMessage({ message:"添加成功",type: "success"});
					//重置数据
					this.form = {
						id:0,
						type:'',
						pid:0,
						prio:100,
						plabel:'新一层节点'
					}
				}).catch((err)=>{
					//console.log(err);
				});
			},
			// 修改子节点
			updateType(obj){
				this.add();
				console.log(obj);
				this.form = {
					id:obj.id,
					type:obj.name,
					pid:obj.pid,
					prio:obj.prio,
					plabel:'新一层节点'
				}
			},
			// 多级菜单格式化
			getMeun(id,arr){
				if(id===0){
					//第一级菜单
						this.type93.forEach(item=>{
							if(item.pid===0){
								arr.push({id:item.id,name:item.type,prio:item.prio,pid:item.pid})
							}
						})
						//再第一级菜单完成之后，从第一级的第一个菜单进入
						this.getMeun(this.chilrType[0].id,this.chilrType)
						console.log(this.chilrType);
					}else{
						//其他他等级的菜单
						//1.循环等级数组，给每个第一级找到第二级
						arr.forEach((item,i)=>{
							//2.将list整个循环，将每一条数据都给等级作比较
							this.type93.forEach((val,k)=>{
								//判断父级的id === 数据的pid
								if(item.id === val.pid){
									//声明一个下一维度的数组
									if(!item.children)item.children = [];
									item.children.push({id:val.id,name:val.type,prio:val.prio,pid:val.pid});
								}
							})
							if(item.children){
								this.getMeun(item.children[0].id,item.children);
							}
						})
					}
				}
			
		}
	}
</script>

<style scoped>
	.type{
		width: 100%;
		height: 100%;
	}
	.border-bottom{
		margin: 5px 0;
		border-bottom: 2px solid #7f7f7f;
	}
	.el-col-4 span{
		font-weight: bold;
	}
	:deep(.el-row){
		width: 98%;
		margin:  0 auto;
		display: flex;
		align-items: center;
	}
	.el-form .from-item{
		margin: 15px 0;
	}
	.from-item label{
		line-height: 25px;
		width: 80px;
		font-size: 13px;
	}
</style>
